// 页头
function shop_header() {
    // 页头
    let icon2_a = $('.icon2_a')
    let icon2_b = $('.icon2_b')
    let icon2_c = $('.icon2_c')
    let icon2_a1 = $('.icon2_a1')
    let icon2_b1 = $('.icon2_b1')
    let icon2_c1 = $('.icon2_c1')

    // 微博二维码
    icon2_a.on('mouseover', function() {
        icon2_a1.show()
        $(this).addClass('icon2_current')


    })
    icon2_a.on('mouseout', function() {
        icon2_a1.hide()
        $(this).removeClass('icon2_current')

    })

    //微信二维码 
    icon2_b.on('mouseover', function() {
        icon2_b1.show()
        $(this).addClass('icon_current')
    })
    icon2_b.on('mouseout', function() {
        icon2_b1.hide()
        $(this).removeClass('icon_current')
    })

    // 手机二维码
    icon2_c.on('mouseover', function() {
        icon2_c1.show()
        $(this).addClass('icon3_current')
    })
    icon2_c.on('mouseout', function() {
        icon2_c1.hide()
        $(this).removeClass('icon3_current')
    })

    // 三级联动
    $('.city').on('mouseover', function() {
        $('.ICityList').show();
        $('.city').addClass('current');
        $('.city_l p').addClass('up')
        $('.ICityList').removeClass('none')

    })

    $('.city').on('mouseout', function() {
        $('.ICityList').hide()
        $('.city').removeClass('current');
        $('.city_l p').removeClass('up')
        $('.ICityList').addClass('none')
    })
    $('.city_select a').on('click', function() {
        $('.city_select a').removeClass("current")
        $(this).addClass('current')
        $(".city_l strong").text($(this).text())
    })
}

// 商品分类
function list() {
    $('#nav .left').on('mouseover', function() {
        $('#shop_cont').show()
    })

    $('#nav .left').on('mouseout', function() {
        $('#shop_cont').hide()
    })


    $('.menu_list .dog_l').each(function(index, el) {
        $('.menu_list .dog_l').eq(index).on('mouseover', function() {
            $('.dog_r').eq(index).show()
            $('.dog_tit span').eq(index).hide()
        })
        $('.menu_list .dog_l').eq(index).on('mouseout', function() {
            $('.dog_r').eq(index).hide()
            $('.dog_tit span').eq(index).show()
        })
    })
}

shop_header()
list()
var navbar = document.querySelectorAll('.navbar');
var cont = document.querySelectorAll('.cont');
var cont2 = document.querySelectorAll('.cont2');
navbar.forEach(function(item, index) {
    item.onclick = function() {
        for (var i = 0; i < navbar.length; i++) {
            cont[i].classList.remove('current')
            cont[index].classList.add('current')
            cont2[i].classList.remove('current2')
            cont2[index].classList.add('current2')
            var small = document.querySelector('.small')
            var cover = document.querySelector('.small span')
            var bigimg = document.querySelectorAll('.big img')
            var maxWidth = small.getBoundingClientRect().width - cover.getBoundingClientRect().width
            var maxHeight = small.getBoundingClientRect().height - cover.getBoundingClientRect().height
            small.onmousemove = function(e) {
                var e = e || window.event;
                var x = e.clientX
                var y = e.clientY - this.getBoundingClientRect().top - cover.clientHeight / 2;
                x = x > maxWidth ? maxWidth : x < 0 ? 0 : x;
                y = y > maxHeight ? maxHeight : y < 0 ? 0 : y;
                cover.style.left = x + 'px'
                cover.style.top = y + 'px'
                bigimg[index].style.marginLeft = -360 / 360 * x + 'px'
                bigimg[index].style.marginTop = -420 / 360 * y + 'px'

            }
            small.onmouseenter = function() {
                cover.style.opacity = '1'
            }
        }
        small.onmouseleave = function() {
            cover.style.opacity = '0'
        }
    }

})

// 放大镜
function fdj() {
    // 遮罩层
    var span = document.querySelector('.f_pic span')
        // console.log(span);
        // 大图

    var navbar = document.querySelectorAll('.navbar');
    var cont = document.querySelectorAll('.cont');
    var cont2 = document.querySelectorAll('.cont2');
    var small = document.querySelector('.small')
    var smallImg = document.querySelector('.small img')
    console.log(small);
    var f_big = document.querySelector('.f_big')
    var big = document.querySelector('.big');
    var bigimg = document.querySelector('.big img');
    var maxWidth = small.getBoundingClientRect().width - span.getBoundingClientRect().width
    var maxHeight = small.getBoundingClientRect().height - span.getBoundingClientRect().height;
    // big.style.display = 'block';


    small.onmouseleave = function() {
        span.style.display = 'none';
        f_big.style.display = 'none'
    }

    small.onmouseenter = function() {
        // console.log(1);        
        span.style.display = 'block';
        f_big.style.display = 'block';
    }

    small.onmousemove = function(e) {
        var e = e || window.event;
        var x = e.clientX - this.getBoundingClientRect().left - span.clientWidth / 2;
        var y = e.clientY - this.getBoundingClientRect().top - span.clientHeight / 2;
        x = x > maxWidth ? maxWidth : x < 0 ? 0 : x;
        y = y > maxHeight ? maxHeight : y < 0 ? 0 : y;
        span.style.left = x + 'px'
        span.style.top = y + 'px'
            // 800/360   
        bigimg.style.marginLeft = -(828 / 360) * x + 'px'
        bigimg.style.marginTop = -(828 / 360) * y + 'px'

    }
    navbar.forEach(function(item, index) {
        item.onclick = function() {
            navbar.forEach(function(item, index) {
                item.classList.remove('img_cur')
            })
            this.classList.add('img_cur')
            this.src = `./image/gyh/fdj/nav${index}.jpg`;
            smallImg.src = `./image/gyh/fdj/nav${index}.jpg`;
            bigimg.src = `./image/gyh/fdj/big/${index}.jpg`
        }
    })

}
fdj();